<html>
<head>
<title>DOM Range Example</title>
<script type="text/javascript">

var globalRange;

function useRanges() {
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);


document.getElementById("txtStartContainer1").value =
oRange1.startContainer.tagName;
document.getElementById("txtStartOffset1").value =
oRange1.startOffset;
document.getElementById("txtEndContainer1").value =
oRange1.endContainer.tagName;
document.getElementById("txtEndOffset1").value = oRange1.endOffset;
document.getElementById("txtCommonAncestor1").value =
oRange1.commonAncestorContainer.tagName;
document.getElementById("txtStartContainer2").value =
oRange2.startContainer.tagName;
document.getElementById("txtStartOffset2").value =
oRange2.startOffset;
document.getElementById("txtEndContainer2").value =
oRange2.endContainer.tagName;
document.getElementById("txtEndOffset2").value = oRange2.endOffset;
document.getElementById("txtCommonAncestor2").value =
oRange2.commonAncestorContainer.tagName;
}

function showRange1(oRange1) {

document.getElementById("txtStartContainer1").value =
oRange1.startContainer.tagName;
document.getElementById("txtStartOffset1").value =
oRange1.startOffset;
document.getElementById("txtEndContainer1").value =
oRange1.endContainer.tagName;
document.getElementById("txtEndOffset1").value = oRange1.endOffset;
document.getElementById("txtCommonAncestor1").value =
oRange1.commonAncestorContainer.tagName;
}

function showRange2(oRange2) {

document.getElementById("txtStartContainer2").value =
oRange2.startContainer.tagName;
document.getElementById("txtStartOffset2").value =
oRange2.startOffset;
document.getElementById("txtEndContainer2").value =
oRange2.endContainer.tagName;
document.getElementById("txtEndOffset2").value = oRange2.endOffset;
document.getElementById("txtCommonAncestor2").value =
oRange2.commonAncestorContainer.tagName;
}


function deleteContents() {
	var oP1 = document.getElementById("p1");
	var oHello = oP1.firstChild.firstChild;
	var oWorld = oP1.lastChild;
	var oRange = document.createRange();
	oRange.setStart(oHello, 2);
	oRange.setEnd(oWorld, 3);
	var oFragment = oRange.deleteContents();
}

function extractContents() {
	var oP1 = document.getElementById("p1");
	var oHello = oP1.firstChild.firstChild;
	var oWorld = oP1.lastChild;
	var oRange = document.createRange();
	oRange.setStart(oHello, 2);
	oRange.setEnd(oWorld, 3);

	var oFragment = oRange.extractContents();
	document.body.appendChild(oFragment);
}

function cloneContents() {
	var oP1 = document.getElementById("p1");
	var oHello = oP1.firstChild.firstChild;
	var oWorld = oP1.lastChild;
	var oRange = document.createRange();
	oRange.setStart(oHello, 2);
	oRange.setEnd(oWorld, 3);

	var oFragment = oRange.cloneContents();
	document.body.appendChild(oFragment);

	globalRange	= oRange;
}


function surroundContents() {
	var oP1 = document.getElementById("p1");
	var oHello = oP1.firstChild.firstChild;
	var oWorld = oP1.lastChild;
	var oRange = document.createRange();
	var oSpan = document.createElement("span");
	oSpan.style.backgroundColor = "yellow";
	oRange.setStart(oHello, 2);
	oRange.setEnd(oWorld, 3);
	oRange.surroundContents(oSpan);

	globalRange	= oRange;
}


function collapse() {

	var oP1 = document.getElementById("p3");
	var oHello = oP1.firstChild.firstChild;
	var oWorld = oP1.lastChild;
	var oRange = document.createRange();

	oRange.setStart(oHello, 2);
	oRange.setEnd(oWorld, 3);

	oRange.collapse(true); //collapse to the starting point

	/*

//	alert(oRange.collapsed); //outputs "true"

	globalRange.collapse(true); //collapse to the starting point
	*/
}

function testCollapse() {
	var oP1 = document.getElementById("p3");
	var oP2 = document.getElementById("p4");
	var oRange = document.createRange();

	oRange.setStartAfter(oP1);
	oRange.setStartBefore(oP2);
//	var oFragment = oRange.deleteContents();
//	alert(oRange);
//	alert(oRange.collapsed); //outputs "true"

/*
	oRange.setStart(oP1.firstChild, 2);
	oRange.setEnd(oP2.firstChild, 3);

	var oSpan = document.createElement("div");
	oSpan.style.backgroundColor = "yellow";

	oRange.surroundContents(oSpan);

//	alert(oRange.collapsed); //outputs "true"
*/
	showRange1(oRange);
	showRange2(oRange);

}


</script>
</head>
<body>

	<p id="p1"><b>Hello</b> World</p>

	<div><p id="p2"><span>Span</span> <font>Font </font><b>Hello</b> World</p></div>

	<p id="p3">Paragraph 1</p><p>sdf</p><p id="p4">Paragraph 2</p>


<br />



<input type="button" value="Use Ranges" onclick="useRanges()" />
<input type="button" value="deleteContents" onclick="deleteContents()" />
<input type="button" value="extractContents" onclick="extractContents()" />
<input type="button" value="cloneContents" onclick="cloneContents()" />
<input type="button" value="surroundContents" onclick="surroundContents()" />
<input type="button" value="collapse" onclick="collapse()" />
<input type="button" value="testCollapse" onclick="testCollapse()" />






<table border="0">
<tr>
<td>
<fieldset>
<legend>oRange1</legend>
Start Container: <input type="text" id="txtStartContainer1"
/><br />
Start Offset: <input type="text" id="txtStartOffset1" /><br />
End Container: <input type="text" id="txtEndContainer1" /><br
/>
End Offset: <input type="text" id="txtEndOffset1" /><br />
Common Ancestor: <input type="text" id="txtCommonAncestor1"
/><br />
</fieldset>
</td>
<td>
<fieldset>
<legend>oRange2</legend>
Start Container: <input type="text" id="txtStartContainer2"
/><br />
Start Offset: <input type="text" id="txtStartOffset2" /><br />
End Container: <input type="text" id="txtEndContainer2" /><br
/>
End Offset: <input type="text" id="txtEndOffset2" /><br />
Common Ancestor: <input type="text" id="txtCommonAncestor2"
/><br />
</fieldset>
</td>
</tr>
</table>
</body>
</html>